<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Synthetic Typing Test</title>
        <style type='text/css'>
			#key th:nth-child(even) {background: #CCf}
			#who th:nth-child(even) {background: #fCb}
			.hover {background-color: blue}
			#drag, #drop {
				width: 20px;
				height: 20px;
				border:1px solid black;
			}
			#drag {
				top: 0px;
				background-color: green;
			}
			#drop {
				margin-top:10px;
				background-color: blue;
			}
			.clicked {
				border:1px solid red;
			}
        </style>
    </head>
    <body>
	<p id='start'>start</p>
	<div class='over'>Move over me</div>
	<p id='end'>end</p>
	<div>
		<div id='drag'></div>
		<div id='drop'></div>
	</div>
	<div class='status'></div>
<script type='text/javascript' src='../../steal/steal.js'></script>
<script type='text/javascript'>
	steal.plugins('jquery', 'jquery/event/drag', 'jquery/event/drop').start();
</script>
<script type='text/javascript' id="demo-source">
	var hoveredOnce = false;
	$(".over").bind('mouseover',function(){
		if (!hoveredOnce) {
			$(this).addClass('hover')
			$(document.body).append("<input type='text' id='typer' />")
			hoveredOnce = true;
		}
	})
	
	$('#drag')
		.live("draginit", function(){})
		
	$('#drop')
		.live("dropover", function(){
			$(document.body).append("<a href='#' id='clicker'>click</a>")
			$("#clicker").click(function(){
				$(".status").html("dragged")
			})
		})
</script>
    </body>
</html>